<template>
  <div id="app">
       <draggable v-model="myArray" draggable=".item">
            <button slot="header" @click="addPeople">Add</button>
            <transition-group>
                <div v-for="element in myArray" :key="element.id" class="item">
                    {{element.name}}
                </div>
            </transition-group>
        </draggable>
   </div>
</template>
<script>
import draggable from 'vuedraggable';
export default {
    components: {
        draggable
    },
    data(){
        return {
            myArray:[
                {
                    id:1,
                    name:'第一个'
                },
                {
                    id:2,
                    name:'第二个'
                },
                {
                    id:3,
                    name:'第三个'
                }
            ]
        }
    },
    methods:{
        addPeople(){

        }
    }
}
</script>
<style lang="scss">
    .item{
        width:100%;
        height: 40px;
        background: gray;
        margin-top:10px;
    }
    
</style>
